<template>
	<view class="safe-bottom-distance form-container">
		<u-form :model="formData" ref="formRef" labelWidth='200rpx'>
			<u-form-item label="姓名" prop="name">
				<u-input v-model="formData.name" clearable/>
			</u-form-item>
			<u-form-item label="性别" prop="sex">
				<u-radio-group v-model="formData.sex">
					<u-radio :name="1">男</u-radio>
					<u-radio :name="2">女</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="身份证类型" prop="cardType">
				<u-radio-group v-model="formData.cardType">
					<u-radio :name="1">身份证</u-radio>
					<u-radio :name="2">其它</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="身份证号" prop="idCard">
				<u-input v-model="formData.idCard" clearable/>
			</u-form-item>
			<u-form-item label="手机号" prop="phone">
				<u-input v-model="formData.phone" clearable/>
			</u-form-item>
			<u-form-item label="座机号" prop="telphone">
				<u-input v-model="formData.telphone" clearable/>
			</u-form-item>
			<u-form-item label="是否有医保" prop="medicalFlag">
				<u-radio-group v-model="formData.medicalFlag">
					<u-radio :name="0">无</u-radio>
					<u-radio :name="1">有</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="居住情况">
				<view class="flex-box">
					<view class="flex-max">
						<u-input v-model="detail.liveFlag" disabled  @click="onShowSelectList('liveFlag')"/>
					</view>
					<u-icon @click="onDelete('liveFlag')" v-if="detail.liveFlag" name="close-circle-fill"></u-icon>
				</view>
			</u-form-item>
			<u-form-item label="自理能力">
				<view class="flex-box">
					<view class="flex-max">
						<u-input v-model="detail.adlFlag" disabled  @click="onShowSelectList('adlFlag')"/>
					</view>
					<u-icon @click="onDelete('adlFlag')" v-if="detail.adlFlag" name="close-circle-fill"></u-icon>
				</view>
			</u-form-item>
			<u-form-item label="照料人员情况说明">
				<view class="flex-box">
					<view class="flex-max">
						<u-input v-model="detail.careFlag" disabled   @click="onShowSelectList('careFlag')"/>
					</view>
					<u-icon @click="onDelete('careFlag')" v-if="detail.careFlag" name="close-circle-fill"></u-icon>
				</view>
			</u-form-item>
			<u-form-item label="省">
				<view class="flex-box">
					<view class="flex-max">
						<u-input v-model="formData.provinceName" disabled   @click="onShowSelectList('provinceId',1)"/>
					</view>
					<u-icon @click="onDelete('provinceId')" v-if="formData.provinceId" name="close-circle-fill"></u-icon>
				</view>
			</u-form-item>
			<u-form-item label="市">
				<view class="flex-box">
					<view class="flex-max">
						<u-input v-model="formData.cityName" disabled   @click="onShowSelectList('cityId',2)"/>
					</view>
					<u-icon @click="onDelete('cityId')" v-if="formData.cityId" name="close-circle-fill"></u-icon>
				</view>
			</u-form-item>
			<u-form-item label="区">
				<view class="flex-box">
					<view class="flex-max">
						<u-input v-model="formData.areaName" disabled   @click="onShowSelectList('areaId',3)"/>
					</view>
					<u-icon @click="onDelete('areaId')" v-if="formData.areaId" name="close-circle-fill"></u-icon>
				</view>
			</u-form-item>
			<u-form-item label='详细地址'>
				<u-input v-model="formData.address" clearable=""></u-input>
			</u-form-item>
			<u-form-item label='经度'>
				<view class="flex-box">
					<view class="flex-max">
						<u-input v-model="formData.longitude" clearable>

						</u-input>
					</view>
					<u-button type="primary" size="mini" @click="getPosition">定位</u-button>
				</view>

			</u-form-item>
			<u-form-item label='纬度'>
				<u-input v-model="formData.latitude" clearable>

				</u-input>
			</u-form-item>
		</u-form>


		<view class="submit-btn">
			<u-button type="success" @click="submit"> 提 交 </u-button>
		</view>
	</view>
	<u-picker v-model="showSelectList" :range="selectList" range-key="name" mode="selector" @confirm="confirmSelect"></u-picker>

</template>

<script setup>
	import {reactive,ref,unref} from "vue"
	import {onLoad,onReady} from "@dcloudio/uni-app"
	import {bindingBean} from "@/utils"
	import addressApi from "@/api/address"
	import personnelApi from "@/api/personnel"
	const detailList = {
		liveFlag:[
		  {id:1,name:"独居"},
		  {id:2,name:"伴侣独居"},
		  {id:3,name:"亲人同住"},
		  {id:4,name:"养老院"}
		],
		adlFlag:[
		  {id:1,name:"可自理"},
		  {id:2,name:"轻度依赖"},
		  {id:3,name:"中度依赖"},
		  {id:4,name:"不能自理"}
		],
		careFlag:[
		   {id:1,name:"亲人"},
		   {id:2,name:"居家保姆"},
		   {id:3,name:"非居家长时保姆"},
		   {id:4,name:"非居家短时保姆"},
		   {id:5,name:"固定周期上门照料"},
		   {id:6,name:"无固定照料人员"}
		]
	}
	const detail = reactive({
		adlFlag:"",
		liveFlag:"",
		careFlag:"",
	})
	const selectList = ref()
	const showSelectList = ref(false)
	const formRef = ref()
	const rules = {
		name: [
			{
				required: true,
				message: '请输入姓名',
				trigger: 'blur'
			},
		],
		sex: [
			{
				required: true,
				message: '请选择性别',
			},
		],
		phone:[
			{required:true,message:"请输入手机号",trigger:'blur'},
			{pattern:/^1(2|3|4|5|6|7|8|9)\d{9}$/,message:"手机号格式错误",trigger:"blur"}
		],

	}
	const formData = reactive({
		id: "",
		userId: "",
		cardType: 1,
		idCard: "",
		name: "",
		sex: "",
		age: "",
		phone: "",
		telphone: "",
		medicalFlag: "",
		liveFlag: "",
		adlFlag: "",
		careFlag: "",
		carePersonInfo: "",
		careInfo: "",
		provinceId: "",
		provinceName: "",
		cityId: "",
		cityName: "",
		areaId: "",
		areaName: "",
		address: "",
		longitude: "",
		latitude: "",
	})
	// 选择框打开的时候零时保存属性
	let prop = ""
	// 打开选择弹框
	const onShowSelectList = async (val,level)=>{
		prop = val
		if(val=='adlFlag'||val=="careFlag"||val=="liveFlag"){
			selectList.value = detailList[val]
		}else if(val=="provinceId"||val==='cityId'||val=="areaId"){
			const res = await getAddressList(level)
			if(!res) return
			selectList.value = res
		}
		showSelectList.value = true
	}
	// 确认选择
	const confirmSelect = (index)=>{
		const res = selectList.value[index]
		if(prop=='adlFlag'||prop=="careFlag"||prop=="liveFlag"){
			formData[prop] = res.id
			detail[prop] = res.name
		}else if(prop=="provinceId"||prop==='cityId'||prop=="areaId"){
			formData[prop] = res.id
			formData[prop.replace("Id",'Name')] = res.name
		}

	}
	// 删除
	const onDelete = (prop)=>{
		if(prop=='adlFlag'||prop=="careFlag"||prop=="liveFlag"){
			detail[prop] = ''
		}else if(prop==='provinceId'){
			formData.provinceName = ""
			formData.provinceId = ""
			formData.cityId = ""
			formData.cityName = ""
			formData.areaId = ""
			formData.areaName = ""
		}else if(prop==='cityId'){
			formData.cityId = ""
			formData.cityName = ""
			formData.areaId = ""
			formData.areaName = ""
		}else if(prop==="areaId"){
			formData.areaName = ""
			formData.areaId = ""
		}
	}

	// 获取地址
	const getAddressList = async (level)=>{
		const params = {level}
		switch(level){
			case 2:
				if(!formData.provinceId){
					uni.showToast({
						icon:'error',
						title:"请选择省"
					})
					return
				}
				params.parentId = formData.provinceId
				break
			case 3:
				if(!formData.cityId){
					uni.showToast({
						icon:'error',
						title:"请选择市"
					})
					return
				}
				params.parentId = formData.cityId
				break
		}
		const {data} =  await addressApi.addressLevelData(params)
		return data||[]

	}

	// 定位
	const getPosition = ()=>{
		uni.getLocation({
			type:"wgs84",
			success(res){
				Object.assign(formData,res)
			}
		})
	}
	const getData = async () => {
		let {data} = await personnelApi.getInfoDataByUser({userId:formData.userId})
		if(!data) return
		Object.entries( {
			adlFlag:data.adlFlag,
			liveFlag:data.liveFlag,
			careFlag:data.careFlag
		}).forEach(([key,value])=> detail[key]=detailList[key].find(item=>item.id==value)?.name )
		bindingBean(formData,data)
	}
	const submit = async () => {
		if(!await formRef.value.validate()) return
		await uni.showModal({
			title:"提示",
			content:"确定提交"
		})
		if(formData.id){
			await personnelApi.updateInfoDataByUser(formData)
		}else{
			await personnelApi.addInfoDataByUser(formData)
		}

		uni.showToast({
			title:"提交成功"
		})
	}
	onLoad(({userId}) => {
		formData.userId = userId
		getData()

	})
	onReady(() => {
		formRef.value.setRules(rules);
	})
</script>

<style lang="scss" scoped>
	.form-container {
		padding: 20rpx;
		.flex-box{
			display: flex;
			:deep(.uicon-close-circle-fill){
				font-size:35rpx !important;
				color: #b7b7b7;
			}
			.flex-max{
				flex: 1;
			}
		}
		.submit-btn {
			width: 96vw;
			margin: 30rpx auto 20rpx;

		}
	}
</style>
